<template>
  <el-container style="flex-direction: column;">
    <div class="block text-center" style="width: 70%; margin: 0 auto">
      <el-carousel height="400px" autoplay>
        <el-carousel-item
          v-for="carousel in carouselList"
          :key="carousel.carouselId">

          <el-image
            style="width: 100%; height: 100%"
            :src="`${base_url+carousel.caPath}`"
            fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-container class="conent-container" >
      <el-header class="menu-header">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item :index="0">全部图书</el-menu-item>
          <el-menu-item
            v-for="category in cateList"
            :key="category.categoryId"
            :index="category.categoryId"
            >{{ category.cname }}</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <FrontBooks :cid = "categoryId"/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import http from "../axios";
import { onMounted, ref } from "vue";
import FrontBooks from "./FrontBooks.vue";
const base_url = ref(import.meta.env.VITE_BASE_APP_PATH)
const carouselList = ref([]);
const activeIndex = ref(0);
const categoryId = ref()

const cateList = ref([]);
onMounted(() => {
  carousel_list();

  http
    .get("/category/list", {
      params: {
        state: 0,
        pageNum: 1,
      },
    })
    .then((resp) => {
      console.log(resp);
      cateList.value = resp.data.data.list;
    });
});

const carousel_list = () => {
  http.get("/carousel/list",{params:{state:1}}).then((resp) => {
    carouselList.value = resp.data.data;
  });
};

const handleSelect = (key, keyPath) => {
  categoryId.value = keyPath;
};
</script>

<style scoped>

.menu-header {
  padding: 0 !important;
}

.conent-container {
  margin-top: 16px !important;
  width: 70%;
  margin: 0 auto;
  
}

.el-aside {
  border: 1px solid gray;
}
.el-main{
  padding: 0 !important;
}
</style>
